<template>
  <div class="app-container">
    <div class="app-title">
      <span>单位信息编辑</span>
    </div>
    <!-- 切换按钮 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-col :span="1">
          <i :class="[treeShow ? 'el-icon-s-fold treeI': 'el-icon-s-unfold treeI']" @click="toggerTree" />
        </el-col>
        <div class="tap-fillet">
          <el-radio-group v-model="activeName" style="margin-left:4rem; width:700px; height:15px; margin-top:-57px">
            <el-radio-button
              label="0"
              name="submit"
            >未送审</el-radio-button>
            <el-radio-button
              label="1"
              name="noSubmit"
            >已送审</el-radio-button>
            <el-radio-button
              label="-1"
              name="reject"
            >被退回</el-radio-button>
            <el-radio-button
              label="all"
              name="all"
            >全部</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <div class="filter-container">
        <div>
          <el-col
            style="text-align:right;margin-top: -8px;"
            :span="16"
          >
            <el-button
              v-if="activeName!=='1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="Edit"
            >
              编辑
            </el-button>
            <!-- <el-button
              v-if="activeName=='0'"
              size="small"
              font-size="14px"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
            >
              撤销修改
            </el-button> -->
            <el-button
              size="small"
              class="filter-item"
              type="primary"
              @click="View"
            >
              预览
            </el-button>
            <el-button
              v-if="activeName=='0'||activeName=='-1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="verifyLoading"
              @click="Verify"
            >
              送审
            </el-button>
            <el-button
              v-if="activeName=='1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="revokeLoading"
              @click="revoke"
            >
              撤销送审
            </el-button>
            <el-button
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="appendixOpen"
            >
              附件管理
            </el-button>
          </el-col>
        </div>
      </div>
    </el-row>

    <div>
      <div style="margin-left:342px; position:absolute; margin-top:-37px">
        <img
          style="width:16px; height:16px;"
          :src="allimgSrc"
        >
      </div>
      <div style="margin-left:75px; position:absolute; margin-top:-37px">
        <img
          style="width:16px; height:16px;"
          :src="Untreatedimg"
        >
      </div>
    </div>
    <div style="margin-left:165px; position:absolute; margin-top:-37px">
      <img
        style="width:16px; height:16px;"
        :src="Processedimg"
      >
    </div>
    <div style="margin-left:252px; position:absolute; margin-top:-37px">
      <img style="width:16px; height:16px;" :src="Backimg">
    </div>

    <div class="grid-content bg-purple" />

    <div ref="box" class="box">
      <div class="left" :class="[isActive ? 'wid':'wids']">
        <div :class="[treeShow ? 'treeShow' : 'treeNotShow']" :style="{'height' : treeHeight + 'px'}">
          <AgencyTree class="agencyTree" @handleTreeQuery="handleTreeQuery" />
        </div>
      </div>
      <div v-show="Show" class="resize" title="收缩侧边栏" />
      <div class="mid" :class="[isActive ? 'mids': 'min']">
        <unitInfoChildrenTable
          :key="timer"
          ref="chil"
          :tab-pane="activeName"
          :tree-data="treeData"
          @verifyCallback="VerifyCallback()"
          @revokeCallback="revokeCallback()"
        />
      </div>
      <Drag ref="icon" />

    </div>
  </div>
</template>

<script>
import unitInfoChildrenTable from '@/views/unitInformationMaintenance/children/unitInformationEditChildren'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'

export default {
  name: 'ComplexTable',
  components: { AgencyTree, unitInfoChildrenTable, Drag },
  data() {
    return {
      treeHeight: null,
      isActive: true,
      Show: false,
      treeShow: false,
      timer: '',
      treeData: '',
      activeName: '0',
      verifyLoading: false,
      revokeLoading: false,
      allimgSrc: require('@/assets/images/all.png'),
      Untreatedimg: require('@/assets/images/select.png'),
      Processedimg: require('@/assets/images/processed.png'),
      Backimg: require('@/assets/images/blueselect.png')
    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === 'all') {
        this.allimgSrc = require('@/assets/images/whiteall.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else if (val === '0') {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/select.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else if (val === '1') {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/blue.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/select.png')
      }
    }
  },

  created() {},
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  methods: {
    getTeHeight() {
      this.treeHeight = window.innerHeight - 270
    },
    // 拖拽
    dragController() {
      this.$refs.icon.dragControllerDiv()
    },
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    handleTreeQuery(data) {
      this.treeData = data
      this.$refs.chil.handleTree(data)
    },
    Edit() {
      this.$refs.chil.handleEdit()
    },
    View() {
      this.$refs.chil.handleView()
    },
    Verify() {
      this.verifyLoading = true
      this.$refs.chil.submitVerify()
    },
    VerifyCallback() {
      this.verifyLoading = !this.verifyLoading
    },
    revoke() {
      this.revokeLoading = true
      this.$refs.chil.revokeVerify()
    },
    revokeCallback() {
      this.revokeLoading = !this.revokeLoading
    },
    appendixOpen() {
      this.$refs.chil.appendixOpen()
    }
  }
}
</script>
